<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	
	<meta charset="UTF-8">
	<title>管理员</title>
	<style type="text/css">
		body{
			background-image:url(img/bb.jpg);
			background-repeat:repeat-x;
		}
	</style>
</head>
<body>
	<%@ include file="include/main-top.jsp" %>
	<div class="container">
		<h2>添加新成员</h2>
		<!-- 这是提交成功后,返回10000的话即提示成功 -->
		<c:if test="${param.state == '10000' }">
			<div id="addemp" class="alert alert-info fade in" >
	            <a href="#" data-dismiss="alert" class="close">×</a>
	            <strong>恭喜您,添加新成员成功!</strong>
	        </div>
		</c:if>
		<!-- 这是用户名或密码为空的话,即提示用户名或密码不能为空 -->
		<div id="msg" class="alert alert-error fade in" style="display:none" >
            <a href="#" data-dismiss="alert" class="close">×</a>
            <strong>error!用户名和密码不能为空!</strong>
        </div>
		<form class="well" action="addemp.jspx"  method="post">
			<label>账户</label>
			<input type="text" id="username" name="username" class="span3" placeholder="--请输入用户名--">
			<span id = "showmsg"></span><br/>
			<label>密码</label>
			<input type="password" id="password" name="password" class="span3" placeholder="--请输入密码--"><br/>
			<button type="submit" id="addempbtn" class="btn btn-primary">提交</button>
			<a href="main.jspx" class="btn">返回</a>
		</form>
	</div>  
	<script type="text/javascript">
		$(document).ready(function(){
			$('#addempbtn').click(function(){
				if($('#username').val() == "" || $('#username').val() == null){
					$('#msg').show();
					$('#username').focus();
					return false;
				}
			});
			$('#username').keydown(function(){
				$('#msg').hide();
			});
			
			
			$('#username').change(function(){
				var username = $('#username').val();
				$.get("addemp.jspx",{username:username},function(result){
					if(result == "ok"){
						$('#showmsg').text("");
						$("<span>").attr("style","color:green").text("√").appendTo($('#showmsg'));
					}else{
						$('#showmsg').text("");
						$("<span>").attr("style","color:red").text("用户名已存在!").appendTo($('#showmsg'));
					}
				});
			});
			
		});
	</script>
</body>
</html>